<!DOCTYPE html>
<!--**
 *Created by wf_H on 2018/8/6.
 *by:web_hwf@sina.com
 *-->
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>侧边模块</title>

    <!--使用IE兼容模式渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/>
    <meta name="renderer" content="webkit">

    <link rel="stylesheet" href="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/style/dist/zui@1.8.1/css/zui.min.css">
    <link rel="stylesheet" href="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/style/dist/zui@1.8.1/css/zui-theme.css">
    <link rel="stylesheet" href="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/style/dist/hover.css">

    <link rel="stylesheet" href="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/style/h-base.css">
    <link rel="stylesheet" href="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/style/h-index.css">

</head>
<body class="childrenBody">

<div class="row" >
    <div class="col-sm-12">
        <!--nav 部件-->
        <div class="nav_list">
            <div class="text_title">待办事项</div>
        </div>
        <div class="db_list">
            <a href="javascript:;" class="db_item">
                <strong>工单</strong>  待办项：354   <span> > </span>
            </a>
            <a href="javascript:;"  class="db_item">
                <strong>合同</strong>  待办项：354   <span> > </span>
            </a>
            <a href="javascript:;"  class="db_item">
                <strong>订单</strong>  待办项：354   <span> > </span>
            </a>
            <a href="javascript:;"  class="db_item">
                <strong>结算</strong>  待办项：354   <span> > </span>
            </a>
        </div>
    </div>


    <div class="col-sm-4">
        <div class="ringhtMenu_lsit">
            <div class="nav_list">
                <div class="text_title">待办事项</div>
            </div>


            <ul class="cbmk_nav" style="">
                <li class="active">
                    <a href="###" style="border: 0">补贴新消息 </a>
                </li>
                <li>
                    <a href="###"  style="border: 0">培训消息 <span class="label label-badge label-success pull-right">4</span></a>
                </li>
                <li>
                    <a href="###">短息通知 </a>
                </li>
                <li>
                    <a href="###">短息通知 </a>
                </li>
                <li>
                    <a href="###">短息通知 </a>
                </li>
                <li>
                    <a href="###">短息通知 </a>
                </li>
                <li>
                    <a href="###">短息通知 </a>
                </li>
                <li>
                    <a href="###">短息通知 </a>
                </li>
                <li>
                    <a href="###">短息通知 </a>
                </li>
            </ul>

            <div id="data_list" class="comments-list" style="padding: 10px">
                <div class="comment">
                    <a href="###" class="avatar">
                        <img src="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/images/fp_01.png" alt="" class="img-circle" width="40" height="40px">
                    </a>
                    <div class="content">
                        <div class="pull-right text-muted">2 个小时前</div>
                        <div><a href="###"><strong>Catouse</strong></a> <span class="text-muted">回复</span> <a href="###">张士超</a></div>
                        <div class="text">你到底把我家钥匙放哪里了...</div>

                    </div>
                </div>
                <div class="comment">
                    <a href="###" class="avatar">
                        <i class="icon-user icon-2x"></i>
                    </a>
                    <div class="content">
                        <div class="pull-right text-muted">2 个小时前</div>
                        <div><a href="###"><strong>Catouse</strong></a> <span class="text-muted">回复</span> <a href="###">张士超</a></div>
                        <div class="text">你到底把我家钥匙放哪里了...</div>

                    </div>
                </div>
                <div class="comment">
                    <a href="###" class="avatar">
                        <i class="icon-user icon-2x"></i>
                    </a>
                    <div class="content">
                        <div class="pull-right text-muted">2 个小时前</div>
                        <div><a href="###"><strong>Catouse</strong></a> <span class="text-muted">回复</span> <a href="###">张士超</a></div>
                        <div class="text">你到底把我家钥匙放哪里了...</div>

                    </div>
                </div>
                <div class="comment">
                    <a href="###" class="avatar">
                        <i class="icon-user icon-2x"></i>
                    </a>
                    <div class="content">
                        <div class="pull-right text-muted">2 个小时前</div>
                        <div><a href="###"><strong>Catouse</strong></a> <span class="text-muted">回复</span> <a href="###">张士超</a></div>
                        <div class="text">你到底把我家钥匙放哪里了...</div>

                    </div>
                </div>
                <div class="comment">
                    <a href="###" class="avatar">
                        <i class="icon-user icon-2x"></i>
                    </a>
                    <div class="content">
                        <div class="pull-right text-muted">2 个小时前</div>
                        <div><a href="###"><strong>Catouse</strong></a> <span class="text-muted">回复</span> <a href="###">张士超</a></div>
                        <div class="text">你到底把我家钥匙放哪里了...</div>

                    </div>
                </div>
                <div class="comment">
                    <a href="###" class="avatar">
                        <i class="icon-user icon-2x"></i>
                    </a>
                    <div class="content">
                        <div class="pull-right text-muted">2 个小时前</div>
                        <div><a href="###"><strong>Catouse</strong></a> <span class="text-muted">回复</span> <a href="###">张士超</a></div>
                        <div class="text">你到底把我家钥匙放哪里了...</div>

                    </div>
                </div>
                <div class="comment">
                    <a href="###" class="avatar">
                        <i class="icon-user icon-2x"></i>
                    </a>
                    <div class="content">
                        <div class="pull-right text-muted">2 个小时前</div>
                        <div><a href="###"><strong>Catouse</strong></a> <span class="text-muted">回复</span> <a href="###">张士超</a></div>
                        <div class="text">你到底把我家钥匙放哪里了...</div>

                    </div>
                </div>
                <div class="comment">
                    <a href="###" class="avatar">
                        <i class="icon-user icon-2x"></i>
                    </a>
                    <div class="content">
                        <div class="pull-right text-muted">2 个小时前</div>
                        <div><a href="###"><strong>Catouse</strong></a> <span class="text-muted">回复</span> <a href="###">张士超</a></div>
                        <div class="text">你到底把我家钥匙放哪里了...</div>

                    </div>
                </div>
                <div class="comment">
                    <a href="###" class="avatar">
                        <i class="icon-user icon-2x"></i>
                    </a>
                    <div class="content">
                        <div class="pull-right text-muted">2 个小时前</div>
                        <div><a href="###"><strong>Catouse</strong></a> <span class="text-muted">回复</span> <a href="###">张士超</a></div>
                        <div class="text">你到底把我家钥匙放哪里了...</div>

                    </div>
                </div>
                <div class="comment">
                    <a href="###" class="avatar">
                        <i class="icon-user icon-2x"></i>
                    </a>
                    <div class="content">
                        <div class="pull-right text-muted">2 个小时前</div>
                        <div><a href="###"><strong>Catouse</strong></a> <span class="text-muted">回复</span> <a href="###">张士超</a></div>
                        <div class="text">你到底把我家钥匙放哪里了...</div>

                    </div>
                </div>
                <div class="comment">
                    <a href="###" class="avatar">
                        <i class="icon-user icon-2x"></i>
                    </a>
                    <div class="content">
                        <div class="pull-right text-muted">2 个小时前</div>
                        <div><a href="###"><strong>Catouse</strong></a> <span class="text-muted">回复</span> <a href="###">张士超</a></div>
                        <div class="text">你到底把我家钥匙放哪里了...</div>

                    </div>
                </div>
                <div class="comment">
                    <a href="###" class="avatar">
                        <i class="icon-user icon-2x"></i>
                    </a>
                    <div class="content">
                        <div class="pull-right text-muted">2 个小时前</div>
                        <div><a href="###"><strong>Catouse</strong></a> <span class="text-muted">回复</span> <a href="###">张士超</a></div>
                        <div class="text">你到底把我家钥匙放哪里了...</div>

                    </div>
                </div>
                <div class="comment">
                    <a href="###" class="avatar">
                        <i class="icon-user icon-2x"></i>
                    </a>
                    <div class="content">
                        <div class="pull-right text-muted">2 个小时前</div>
                        <div><a href="###"><strong>Catouse</strong></a> <span class="text-muted">回复</span> <a href="###">张士超</a></div>
                        <div class="text">你到底把我家钥匙放哪里了...</div>

                    </div>
                </div>
                <div class="comment">
                    <a href="###" class="avatar">
                        <i class="icon-user icon-2x"></i>
                    </a>
                    <div class="content">
                        <div class="pull-right text-muted">2 个小时前</div>
                        <div><a href="###"><strong>Catouse</strong></a> <span class="text-muted">回复</span> <a href="###">张士超</a></div>
                        <div class="text">你到底把我家钥匙放哪里了...</div>

                    </div>
                </div>


            </div>
            <div  class="loading_img"><img src="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/images/loading.svg" alt="" width="30" height="30px"></div>



        </div>

    </div>
    <div class="col-sm-4">
        <div class="ringhtMenu_lsit">
            <ul class="nav nav-secondary nav-justified">
                <li class="active">
                    <a href="###">补贴新消息 </a>
                </li>
                <li>
                    <a href="###">培训消息 <span class="label label-badge label-success pull-right">4</span></a>
                </li>
                <li>
                    <a href="###">短息通知 </a>
                </li>
            </ul>
            <div class="list-group">
                <a href="#" class="list-group-item">
                    <h4 class="list-group-item-heading">项目</h4>
                    <p class="list-group-item-text text-muted">共12个新条目</p>
                </a>
                <a href="#" class="list-group-item active">
                    <h4 class="list-group-item-heading">Bug</h4>
                    <p class="list-group-item-text text-muted">没有未处理的bug</p>
                </a>
                <a href="#" class="list-group-item">
                    <h4 class="list-group-item-heading">任务</h4>
                    <p class="list-group-item-text text-muted"># 处理bug</p>
                </a>
                <a href="#" class="list-group-item">
                    <h4 class="list-group-item-heading">项目</h4>
                    <p class="list-group-item-text text-muted">共12个新条目</p>
                </a>
                <a href="#" class="list-group-item active">
                    <h4 class="list-group-item-heading">Bug</h4>
                    <p class="list-group-item-text text-muted">没有未处理的bug</p>
                </a>
                <a href="#" class="list-group-item">
                    <h4 class="list-group-item-heading">任务</h4>
                    <p class="list-group-item-text text-muted"># 处理bug</p>
                </a>
                <a href="#" class="list-group-item">
                    <h4 class="list-group-item-heading">项目</h4>
                    <p class="list-group-item-text text-muted">共12个新条目</p>
                </a>
                <a href="#" class="list-group-item active">
                    <h4 class="list-group-item-heading">Bug</h4>
                    <p class="list-group-item-text text-muted">没有未处理的bug</p>
                </a>
                <a href="#" class="list-group-item">
                    <h4 class="list-group-item-heading">任务</h4>
                    <p class="list-group-item-text text-muted"># 处理bug</p>
                </a>
                <a href="#" class="list-group-item">
                    <h4 class="list-group-item-heading">项目</h4>
                    <p class="list-group-item-text text-muted">共12个新条目</p>
                </a>
                <a href="#" class="list-group-item active">
                    <h4 class="list-group-item-heading">Bug</h4>
                    <p class="list-group-item-text text-muted">没有未处理的bug</p>
                </a>
                <a href="#" class="list-group-item">
                    <h4 class="list-group-item-heading">任务</h4>
                    <p class="list-group-item-text text-muted"># 处理bug</p>
                </a>
                <a href="#" class="list-group-item">
                    <h4 class="list-group-item-heading">项目</h4>
                    <p class="list-group-item-text text-muted">共12个新条目</p>
                </a>
                <a href="#" class="list-group-item active">
                    <h4 class="list-group-item-heading">Bug</h4>
                    <p class="list-group-item-text text-muted">没有未处理的bug</p>
                </a>
                <a href="#" class="list-group-item">
                    <h4 class="list-group-item-heading">任务</h4>
                    <p class="list-group-item-text text-muted"># 处理bug</p>
                </a>
                <div class="alert alert-primary text-center">暂无数据</div>
            </div>
        </div>
    </div>

</div>

<script type="text/javascript" src="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/style/dist/zui@1.8.1/js/zui.min.js"></script>

<script>
    $(function () {
        $('.nav-secondary').on('click','li',function () {
            $(this).addClass('active').siblings().removeClass('active') ;
        })



        //监听滚动
        var isGet = true ;
        $(document).on("scroll", function () {
            //真实内容的高度
            var pageHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight);
            //视窗的高度
            var viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;
            //隐藏的高度
            var scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
            //滚到底部触发事件
            if(pageHeight - viewportHeight - scrollHeight <=0){
                if(isGet){ //判断是否触发异步请求
                    getData() ;
                }
            }
        });

        //异步请求数据
        function getData() {
            //显示加载条

            $('.loading_img').show() ;
            $.ajax({
                url: '',
                data:{
                    'id':	'1',
                },
                type:'get',
                dataType:'json',
                success:function(res){
                    console.log(res);

                    var html_list = '' ;
                    if(res.status == 1){ //有数据
                        html_list += '<div class="comment">\n' +
                    '                    <a href="###" class="avatar">\n' +
                    '                        <img src="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/images/fp_01.png" alt="" class="img-circle" width="40" height="40px">\n' +
                    '                    </a>\n' +
                    '                    <div class="content">\n' +
                    '                        <div class="pull-right text-muted">2 个小时前</div>\n' +
                    '                        <div><a href="###"><strong>Catouse</strong></a> <span class="text-muted">回复</span> <a href="###">张士超</a></div>\n' +
                    '                        <div class="text">你到底把我家钥匙放哪里了...</div>\n' +
                    '                    </div>\n' +
                    '                </div>'
                    }else {//没数据
                        isGet = false ;
                        html_list = '<div class="alert alert-primary text-center" >没有更多数据了</div>' ;
                    }
                    $('#data_list').append(html_list) ;
                    $('.loading_img').hide() ;

                },
                error : function(){
                    $('.loading_img').hide() ;
                }
            });
        }
    })
</script>

</body>
</html>